<template>
  <div class="loginmod" v-show="b" >
    <div class="mengban" v-on:click="changeIsShow"></div>
    <div class="userInfo">
      <div class="close" v-on:click="changeIsShow">
        ✖
      </div>
      <div class="login" >
        <span v-for="(item,index) in ['登录','注册']"
              v-bind:key="index"
              v-bind:class="{active:currentIndex===index}"
              v-on:click="getCurrentIndex(index)">
          {{item}}
        </span>
      </div>
      <div class="nameP">
        <input type="text" placeholder="请输入账号" class="userAccount"><br>
        <input type="password" placeholder="请输入密码" class="pwd"><br>
        <input type="button" value="登录" v-if="0===currentIndex" class="btn">
        <input type="button" value="注册" v-if="1===currentIndex" class="btn">
      </div>
    </div>
  </div>
</template>

<script>
import {nextTick, ref} from "vue";
// nextTick,
export default {
  name: "LoginMod",
  setup(){
    let b=ref(false)
    let currentIndex=ref(0)
    function changeIsShow(){
      b.value=true
      nextTick(()=>{
        b.value=!b.value
      })

    }
    function getCurrentIndex(index){
      currentIndex.value=index
    }
    return{
      b,
      currentIndex,
      changeIsShow,
      getCurrentIndex
    }
  }
}
</script>
<style scoped>
.loginmod{
  width: 100%;
  height: 100%;
  z-index: 10;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.close{
  position: absolute;
  right: 15px;
  top: 9px;
  font-size: 30px;
  color: #ef943c;
  font-weight: normal;
}
.loginmod .mengban{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
}
.loginmod .userInfo{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  background: #ffffff;
  width: 640px;
  height: 470px;
  transform: translate(-50%,-50%);
  border-radius: 16px;
}
.loginmod .userInfo .login{
  padding-top: 43px;
  text-align: center;
}
.loginmod .userInfo span{
  font-size: 25px;
  color: #211d1c;
  padding: 5px 20px;
}
.active{
  border-bottom: 4px solid #f2953a;
}
.nameP{
  padding-top: 60px;
  padding-left: 100px;
}
.nameP input{
  color: #7c7c7c;
  font-size: 24px;
  line-height: 24px;
}
.userAccount,.pwd{
  margin-bottom: 70px;
  margin-left: 30px;
}
.nameP .btn{
  width: 500px;
  height: 82px;
  background: #ef943c;
  text-align: center;
  color: #eeeeee;
  border-radius: 41px;
}
</style>